<template>
    <div>
        <!-- 复杂数据类型的专用api -->

        <p>{{ objRef.num }}</p>
        <span>{{ objref2.num}}</span>
    </div>
</template>

<script lang='ts' setup>
import { ref,onMounted,reactive } from "vue"
    


    let obj = {
        num:18
    }
    let objRef = reactive(obj)
    console.log(objRef);
    console.log(objRef.num);
    

    let obj2 = {
        num:20
    }
    let objref2 = ref(obj2)
    console.log(objref2)
    console.log(objref2.value)
    console.log(objref2.value.num);

    //总结：这里打印的结果，objref2.value  就和 objref的值是一样的，意思就是说 ，通过reactive创建出来的对象其实际就是通过ref创建
    // 出来的对象的.value那一层，其本质原理其实就是 ref内部也是通过reactive来进行处理数据的，所以可以看出 ，当使用复杂数据类型的
    // 时候，我们一般是使用reactive 来处理，因为这样可以少写一层调用。原先是 objref2.value.num;现在就是 objref.num 就可以使用了
    // 所以我们需要区别开来写，使用普通数据类型的时候，我们就使用ref来进行创建响应式的数据，使用复杂数据类型的时候，我摸就使用reactive
    // 来床架你响应式的数据。

    
</script>
 
<style lang = "less" scoped>
    
</style>